<script setup>
import merch from "@/assets/merch.png"
import ware from "@/assets/warehouse.png"
import Gin from "@/assets/pro.png"
import inStock from "@/assets/inStock.png"
import outStock from "@/assets/outStock.png"
import Gout from "@/assets/pro01.png"
import {ref} from "vue"
import {useRouter} from "vue-router";
const router = useRouter()
const list = ref([
  {
    icon: outStock,
    name: '出库报表',
    url: '/OutboundReport'
  },
  {
    icon: inStock,
    name: '入库报表',
    url: '/InventoryReport'
  },
  {
    icon: Gout,
    name: '商品出库',
    url: '/GoodsOutbound'
  },
  {
    icon: Gin,
    name: '商品入库',
    url: '/GoodsWarehousing'
  },
  {
    icon: ware,
    name: '仓库统计',
    url: '/WarehouseStatistics'
  },
  {
    icon: merch,
    name: '存货统计',
    url: '/InventoryStatistics'
  },

])
const jumpFn = (item) => {
  if (item.url){
    router.push(item.url)
  }
}
</script>

<template>
  <div class="mt-[15px] w-full backgroundColor shadow-xs rounded-lg p-[15px] box-border">
    <div class="font-bold text-1xl">统计报表</div>
    <div class=" w-full flex flex-wrap items-center">
      <div class="w-[25%] text-center mt-[15px]"
           v-for="(item, index) in list" :key="index"
           @click="jumpFn(item)"
      >
        <img :src="item.icon" alt="" class="w-[40px] h-[40px]  m-auto">
        <div class="text-[12px] mt-[5px] text-[#333]">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>